<template>
  <div class="container">
    <nav-bar title="个人资料" />
    <!-- 导航链接 -->
    <div class="user-navs">
      <div class="item">
        <div class="label">头像</div>
        <div class="value">
          <van-uploader :after-read="afterRead">
            <img v-if="userInfoDetail.Photo==='' || userInfoDetail.Photo===null" class="avatar" src='../../assets/img/person.png' />
            <img v-else class="avatar" :src='userInfoDetail.Photo' />
          </van-uploader>
        </div>
        <div class="arrow"></div>
      </div>
      <router-link to="/userNick" class="item">
        <div class="label">用户名</div>
        <div class="value">{{userInfoDetail.Nick}}</div>
        <div class="arrow"></div>
      </router-link>
      <div @click="bindPhone" class="item" :class="{'item-gray': userInfoDetail.CellPhone}">
        <div class="label">绑定手机</div>
        <div class="value">{{userInfoDetail.CellPhone ? '+86 ' + userInfoDetail.CellPhone:''}}</div>
        <div class="arrow" v-if="!userInfoDetail.CellPhone"></div>
      </div>
      <!-- <div @click="bindEmail" class="item">
        <div class="label">绑定邮箱</div>
        <div class="value">{{userInfoDetail.Email}}</div>
        <div class="arrow"></div>
      </div> -->
      <!-- <div @click="bindWeChat" class="item">
        <div class="label">绑定微信</div>
        <div class="value">
          <span v-if="wxInfo">{{wxInfo.nickname}}</span>
        </div>
        <div class="arrow"></div>
      </div> -->
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getUserDetail, saveUserInfo, getUserContact } from '../../network/user'
import { protectPhone, filterEmoji } from '../../utils'
import { Toast } from 'vant'
import { format } from 'date-fns'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      wxInfo: JSON.parse(localStorage.getItem('wxInfo')),
      userInfoDetail: {
        Photo: ''
      },
    }
  },
  mounted() {
    this.getUserDetail()
    this.getUserContact()
    console.log(JSON.parse(localStorage.getItem('wxInfo')))
  },
  methods: {
    getUserContact(){
      getUserContact(info => {
        console.log('info', info)
      })
    },
    getUserDetail(){
      let requestData = {
        userkey: this.userKey
      }
      getUserDetail(requestData, info => {
        this.userInfoDetail = info
        this.userInfoDetail.CellPhone = 
          protectPhone(this.userInfoDetail.CellPhone)
      })
    },
    saveUserInfo(){
      let userInfoDetail = this.userInfoDetail
      let requestData = {
        userkey: this.userKey,
        Id: userInfoDetail.UserId,
        RealName: userInfoDetail.RealName,
        Nick: filterEmoji(userInfoDetail.Nick),
        Email: userInfoDetail.Email,
        QQ: userInfoDetail.QQ,
        CellPhone: userInfoDetail.CellPhone,
        Sex: userInfoDetail.Sex,
        BirthDay: userInfoDetail.BirthDay,
        Occupation: ' ',
        Photo: userInfoDetail.Photo || ' ',
      }
      console.log(requestData)
      saveUserInfo(requestData, res => {
        Toast('修改成功')
        this.getUserDetail()
      })
    },
    bindPhone(){
      if(!this.userInfoDetail.CellPhone){
        this.$router.push({
          path: '/regnewPhone'
        })
      }
    },
    bindEmail(){
      this.$router.push({
        path: '/registerEmail',
        query: {
          type: 'bind',
          from: 'user'
        }
      })
    },
    bindWeChat(){
      this.$router.push({
        path: '/loginWechat',
      })
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let files = []
      if(file instanceof Array){ // 多张图
        file.map(item => {
          files.push(item.file)
        })
        this.uploadImg(files)
      } else { // 单张图
        files = [file.file]
        this.uploadImg(files)
      }
    },
    //上传图片
    uploadImg(files) {
      for(let i = 0; i < files.length; i++){
        this.put(files[i])
      }
    },
    put: async function (file) {
      let timestamp = format(new Date(), 'yyyy-MM-dd-HH-mm-ss')
      let picName = timestamp + '-' + parseInt(Math.random() * 99)
      let fileType = file.type.split('/')[1]
      try {
        let result = await this.$client.put('user-info/' + picName + '.' + fileType, file)
        // 上传成功后
        this.$set(this.userInfoDetail, 'Photo', result.url)
        this.saveUserInfo()
      } catch (e) {
        console.log('Error: ', e)
      }
    },
  },
}
</script>

<style scoped>
.avatar{
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.user-navs .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 50px;
  font-size: 14px;
  border-top: 1px solid #f7f7f7;
  background-color: #ffffff;
}
.user-navs .item-mt{
  margin-top: 10px;
  border-top: none;
}
.user-navs .item .value{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  color: #8c8c8c;
  text-align: right;
}
.user-navs .item-gray .value{
  color: #ababab;
}
.user-navs .item .value .new{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #d50721;
}
.user-navs .item .arrow{
  width: 6px;
  height: 6px;
  border-top: 1px solid #8c8c8c;
  border-right: 1px solid #8c8c8c;
  transform: rotate(45deg);
  margin-left: 10px;
}
</style>